I'm in the middle of building my first web application using Node.js and Expressjs. For my template/view-engine I use Express-handlebars, but I've some issues.
I want to be able to dynamically change content in the red area, based on the menu selected in the left menubar.
I've already successfully set up routes for rendering the right page, but can I add another "subdirectory" in same way as the first? So for example: "domain/admins/adminpanel/dashboard" shows the users dashboard in the red area and "domain/admins/adminpanel/posts" shows something else in the red area?
I have tried using handlebars partials, but I do not quite understand the purpose of using it in the way I want.
Instead of posting 10 images, it's easier just to show the whole code.: https://github.com/Jakobtottrup/OptekSemester2/tree/master/Web
Screenshot showing 'red area' the page is rendered from here
router.get('/adminpanel', function(req, res){
res.render('admin-backend/adminsDashboard', {title: "Admin Panel", name:
"Brugers navn"});
});
this is the HTML forming the page
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><i class="fa fa-crosshairs fa-fw"></i>{{ name }}</a></li>
<li><a href=""><i class="fa fa-edit fa-fw"></i>Posts</a></li>
<li><a href="create_seats"><i class="fa fa-th fa-fw"></i>Bordopstilling</a></li>
<li><a href="seating_groups"><i class="fa fa-users fa-fw"></i>Siddegrupper</a></li>
<li><a href="tournaments"><i class="fa fa-sitemap fa-fw"></i>Turneringer</a></li>
<li><a href="users"><i class="fa fa-user fa-fw"></i>Brugere</a></li>
<li><a href="sponsors"><i class="fa fa-tasks fa-fw"></i>Sponsors</a></li>
<li><a href="mails"><i class="fa fa-envelope fa-fw"></i>Mails</a></li>
<li><a href="events"><i class="fa fa-cogs fa-fw"></i>Dette LAN</a></li>
</ul>
</div>
<div class="col-md-9 well">
Panel content here
</div>
</div>